<template>
  <div class="mine-box admin-order-box equip-box">
    <router-link to="/admin/equipadd">
      <div id="tixian">新增设备</div>
    </router-link>
    <div class="user-box-title" :style="back">
      <adminuserinfo></adminuserinfo>
      <div class="m-moneybox">
        <div class="fleft choose-input-box">
          <span size="30" class="iconfont icon-sousuo"></span>
          <input maxlength="15" type="text" class="choose-input" placeholder="小区名称/设备编号" v-model="keWord"/>
        </div>
        <!--        <div class="fright sx-text">筛选</div>-->
      </div>
    </div>
    <div class="equip-list List">
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loaded-all="loaded_all"
        :loading="loading"
        @load="load"
      >
        <mu-expansion-panel
          v-for="(item,index) in equipList"
          :expand="panel === index"
          @change="toggle(index)"
          :key="index"
        >
          <div slot="header" class="title">
            <span class="fleft">{{item.poltNm}}</span>
            <span class="fright">{{item.pileResults.length}}台</span>
            <div class="_clear"></div>
          </div>
          <div slot="default" class="eq-single" v-for="(v,i) in item.pileResults" :key="i">
            <div class="bh-box">
              <span class="fleft">充电桩编号：{{v.id}}</span><span class="iconfont icon-xinhao1 fleft"></span>
              <span class="fright" style="color:#419D3E">{{(v.m||31) >30 ?'离线':'运行'}}<!--{{v.runningStatus|runningStatus}}--></span>
              <span class="fright" @click="editHandler(v.id)" style="color:white;margin-right:10px">编辑</span>
              <div class="_clear"></div>
            </div>
            <div class="btn1-box">
              <span class="blue-box" @click="port(v.id)"><span class="iconfont icon-duankouup4"></span> 端口管理</span>
              <span class="blue-box" @click="rule(v.id,v.cardRuleId,v.wxRuleId)"><span
                class="iconfont icon-guizeshezhi"></span>规则设置</span>
              <span class="red-box" @click="shouyi(v.id)"><span class="iconfont icon-shouyi"></span>查看收益</span>
            </div>
          </div>
        </mu-expansion-panel>

        <div v-show="nolist" class="nolist">
          <span class="iconfont icon-charging"></span>
          <p>暂无设备</p>
        </div>
      </mu-load-more>
    </div>
    <rulediv ref="rulediv" :id="id" :cardrule="cardrule" :wxrule="wxrule"></rulediv>
  </div>
</template>

<script>
    import rulediv from "./ruleadd";

    export default {
        data() {
            return {
                id: "",
                panel: "",
                keWord: "",
                nolist: false,
                cardrule: "",
                wxrule: "",
                back: {
                    background:
                        "url(" + require("../../../assets/image/minebackimg.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },
                equipList: [],
                num: 10,
                refreshing: false,
                loading: false,
                loaded_all: false,
            };
        },
        components: {
            rulediv: rulediv
        },
        methods: {
            editHandler(id) {
                this.$router.push({
                    path: "/admin/equipadd/" + id
                });
            },
            rule(id, cardrule, wxrule) {
                this.cardrule = cardrule;
                this.wxrule = wxrule;
                this.id = id;
                this.$refs.rulediv.Showrulediv();
                this.$refs.rulediv.data(wxrule, cardrule);
            },
            toggle(panel) {
                this.panel = panel === this.panel ? "" : panel;
            },
            getChargingList(param) {
                this.$api.getChargingPileList(param).then(res => {
                    this.equipList = res.data.data;
                });
            },
            port(id) {
                this.$router.push({
                    path: "/admin/port/" + id
                });
            },
            shouyi(id) {
                this.$router.push({
                    path: "/admin/ordersales",
                    query: {
                        id: id
                    }
                });
            },
            refresh() {
                this.refreshing = true;
                this.$refs.container.scrollTop = 0;
                setTimeout(() => {
                    this.refreshing = false;
                    this.getChargingList();
                }, 2000);
            },
            load() {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.num += 3;
                    this.getChargingList();
                }, 2000);
            }
        },
        watch: {
            keWord: function (v) {
                this.getChargingList({keWord: v, pageNo: 1, pageNum: this.num});
            },
            equipList: function (v) {
                if (v == "") {
                    this.nolist = true;
                } else {
                    this.nolist = false;
                }
            }
        },
        filters: {
            runningStatus: function (v) {
                switch (v) {
                    case "0":
                        return "运行";
                        break;
                    case "1":
                        return "离线";
                        break;
                    default:
                        return "";
                        break;
                }
            }
        },
        mounted() {
            this.getChargingList();
        }
    };
</script>

<style lang="" scoped>
  .icon-duankouup4 {
    font-size: 12PX;
  }

  .icon-duankouup4, .icon-shouyi, .icon-guizeshezhi {
    margin-right: 5px
  }

  .icon-xinhao1 {
    font-size: 12PX;
    color: #03BE02;
    margin-left: 10px
  }
</style>
